<html style="background-color: rgba(170, 170, 127, 0.3)">
<head style="background-color: rgba(255, 0, 0, 0.5)">
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>
        js调用java
    </title>
</head>

<body style="font-size: 40px">
<!--<p>-->
<!--    <xmp id="show">-->
<!--    </xmp>-->
<!--</p>-->
<!--<p>-->
<!--    <xmp id="init">-->
<!--    </xmp>-->
<!--</p>-->

<!--<p style="font-size: 40px; background-color: rgba(0, 255, 0, 0.5)" id="show">-->
<!--   测试显示区域-->

<!--</p>-->

<p>
    <input style="font-size: 40px" type="text" id="text1" value="用户名(username)"/>
</p>
<p>
    <input style="font-size: 40px" type="text" id="text2" value="password"/>
</p>
<p>
    <input style="font-size: 40px" type="button" id="enter" value="调Native方法 submitFromWeb22" onclick="testClick();"
    />
</p>
<p>
    <input style="font-size: 40px" type="button" id="enter1" value="调Native方法 submitFromWeb" onclick="testClick1();"
    />
</p>
<p>
    <input style="font-size: 40px" type="button" id="enter2" value="显示html" onclick="testDiv();"/>
</p>
<p>
    <input style="font-size: 40px" type="file" value="打开文件"/>
</p>
</body>
<script>

        function testDiv() {
            document.getElementById("show").innerHTML = document.getElementsByTagName("html")[0].innerHTML;
        }

        function testClick() {
            console.log('===666666====');
<!--            document.getElementById("enter").value = "名字";-->

            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;

            //send message to native
             var data = {id: 1, content: "ppp"};
                window.WebViewJavascriptBridge.callHandler(
                'submitFromWeb22'
                , {'param': 'bbb'}
                , function(responseData) {
                    var obj = JSON.parse(responseData);
                  document.getElementById("text1").value = "testClick = " + obj['status'];
                }
            );
        }

        function testClick1() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;
<!--            document.getElementById("text2").value = window.WebViewJavascriptBridge.callHandler;-->

            //call native method
            window.WebViewJavascriptBridge.callHandler(
                'submitFromWeb'
                , {'param': 'aaa'}
                , function(responseData) {
<!--                    document.getElementById("show").innerHTML = "send get responseData from native, data = " + responseData-->

                  document.getElementById("text1").value = "testClick1 = " + responseData;
                }
            );
        }

        function bridgeLog(logContent) {
            document.getElementById("show").innerHTML = logContent;
        }

        function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge && WebViewJavascriptBridge.inited) {
            document.getElementById("text1").value = "hhhh";
                callback(WebViewJavascriptBridge)
            } else {
               document.getElementById("text1").value = "ttttt";
                document.addEventListener(
                     'WebViewJavascriptBridgeReady'
                    , function() {
<!--                        document.getElementById("text1").value = "gggg";-->
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }

<!--  document.getElementById("text1").value = "ttttt";-->
        connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    'Javascript Responds': '测试中文!'
                };

                if (responseCallback) {
                    console.log('JS responding with', data);
                    responseCallback(data);
                }
            });

            bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("text1").value = ("data from Java: = " + data + Date.now());
                if (responseCallback) {
                    var responseData = "Javascript Says Right back aka!";
                    responseCallback(responseData);
                }
            });
        })

</script>

</html>

